<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    :width="props.width"
    :before-close="handleClose"
  >
    <component :ref="(el) => (child = el)" :is="props.vNode"></component>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="isOk"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import { getCurrentInstance, createVNode, components, h } from "vue";
import extend from "./extend.vue";

const props = withDefaults(
  defineProps<{
    hasCloseMessage?: boolean;
    modelValue: boolean;
    title: string;
    width?: number;
    vNode: any;
    resolve: Function;
    reject: Function;
  }>(),
  {
    hasCloseMessage: false,
    modelValue: false,
    title: "标题",
    width: 500,
    vNode: () => {},
    resolve: () => {},
    reject: () => {},
  }
);
const dialogVisible = ref<boolean>(false);
const emit = defineEmits(["update:modelValue"]);
dialogVisible.value = props.modelValue;
const child = ref();

const renderFunction = () => h(props.vNode);
console.log(renderFunction);
const isOk = () => {
  const i = child.value;
  if (i.check) {
    if (i.check()) {
      props.resolve({
        code: 0,
        data: i.getData(),
      });
      dialogVisible.value = false;
    }
  } else {
    dialogVisible.value = false;
  }
  props.resolve({
    code: 0,
  });
};
watch(
  () => props.modelValue,
  () => {
    dialogVisible.value = props.modelValue;
  }
);
watch(dialogVisible, async () => {
  emit("update:modelValue", dialogVisible);
});
const handleClose = (done: () => void) => {
  done();
};
</script>

<style lang="scss" scoped>
</style>
